<template>
  <div>
    <div style="width: 80%; text-align: left; margin: 20px;">
    <el-button type="primary" @click="open_insert_dialog">添加权限</el-button>
    </div>
    <!-- 权限列表 -->
    <Table ref="myTable" :param="table"></Table>

    <!-- 新增权限的弹出框 -->
    <el-dialog
      title="新增权限"
      :visible.sync="basic.dialogVisible"
      width="30%">

      <!-- 表单区域 -->
      <el-form ref="form" :model="form">
        <el-form-item label="权限名称">
          <el-input v-model="form.powerName" placeholder="请输入权限名称"></el-input>
        </el-form-item>
        <el-form-item label="选择父权限">
          <br/>
          <el-select v-model="form.parentPower" placeholder="请选择">
            <el-option
              v-for="p in powers"
              v-if="p.powerType != 2"
              :label="p.powerName"
              :value="p.id + '-' + p.powerType">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="权限资源">
          <el-input v-model="form.powerRes" placeholder="请输入资源路径"></el-input>
        </el-form-item>
        <el-form-item label="权限描述">
          <el-input v-model="form.powerInfo" type="textarea" placeholder="请输入部门描述"></el-input>
        </el-form-item>
      </el-form>
      <!-- 表单区域 -->

      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="insert_power">新 增</el-button>
        <el-button @click="basic.dialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  //自定义的表格组件
  import Table from './Table'

  export default {
    components: {
      Table
    },
    data(){
      return {
        //当前的权限列表
        powers: [],
        form: {
          //表达的相关属性
          powerName: null,
          powerInfo: null,
          parentPower: null,
          powerRes: null
        },
        basic: {
          //弹出框的属性
          dialogVisible: false
        },
        table: {
          //表头
          title: [
            {title:"权限编号", attr:"id"},
            {title:"权限名称", attr:"powerName"},
            {title:"父权限名称", attr:"parentPowerName", other: (data) => {
                 return !data ? "无" : data;
            }},
            {title:"权限资源", attr:"powerRes", other: (data) => {
                 return !data ? "无" : data;
            }},
            {title:"权限类型", attr:"powerType", other: (data) => {
                 if(data == 0){
                   return "一级权限";
                 } else if(data == 1){
                   return "二级权限";
                 } else if(data == 2){
                   return "三级权限";
                 }
            }}
          ],
          //请求的url
          url: "/sys/power/list",
          //请求的数据
          data: {},
          //后续的操作按钮
          btns: {
            enable: true,
            //操作列表
            actions: [
              {btnName: "修改", callable: (val) => {
                console.log("新增了：", val);
              }},
              {btnName: "删除", callable: (val) => {
                console.log("修改了：", val);
              }}
            ]
          },
          //分页参数
          page: {
            //是否需要开启分页的功能
            enable: true,
            //当前第几页
            pageNum: 1,
            //每页多少行记录
            pageSize: 5
          }
        }
      }
    },
    methods: {
      //打开新增的弹出框
      open_insert_dialog(){
        this.basic.dialogVisible = true;
      },
      //新增部门
      insert_power(){
        console.log("新增的权限对象", this.form);

        //获取powerParent值，解析出 父权限的id 以及父权限的 级别类型
        //pid-powerType
        var parentPower = this.form.parentPower;
        if(parentPower){
          var datas = parentPower.split("-");
          this.form.pid = datas[0];
          this.form.powerType = parseInt(datas[1]) + 1;
        } else {
          //如果没有父权限，则当前权限就是顶级权限
          this.form.powerType = 0;
        }

        this.$.ajax({
          type: "POST",
          url: "/sys/power/insert",
          data: this.form,
          success: (data) => {
            //清空表单
            this.form = {};
            //关闭弹窗
            this.basic.dialogVisible = false;
            //刷新表格
            this.$refs.myTable.request();
            //再次请求权限列表
            this.queryPowers();
          }
        });
      },
      //查询权限列表
      queryPowers(){
        this.$.ajax({
          url: "/sys/power/list",
          success: (data) => {
            this.powers = data;
          }
        });
      }
    },
    mounted(){
      //页面加载时触发
      this.queryPowers();
    }
  }
</script>

<style>
</style>
